<template>
  <div class="h-full overflow-y-auto pb36">
    <PageHeader :title="t('apply.open_up.店铺入驻结果')" />
    <div class="fs-20 mt32 text-center font-bold">
      {{
        tenantInfo.status == -1
          ? t("apply.open_up.审核驳回请查看下方驳回原因，修改后再次提交审核")
          : tenantInfo.status == 2
          ? t("apply.open_up.申请已通过，请前往登录")
          : t("apply.open_up.申请已提交请等待管理员审核")
      }}
    </div>
    <div class="mt24">
      <div class="custom-table" style="width: 650px">
        <div class="titleRow">{{ t('apply.open_up.审核信息') }}</div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.店铺名称') }}</div>
          <div class="custom-table-value">
            {{ tenantInfo["name" + locale] }}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.入驻类型') }}</div>
          <div class="custom-table-value">
            {{ tenantInfo.settleType === 1 ? t('apply.open_up.个人入驻') : t('apply.open_up.企业入驻') }}
          </div>
        </div>
        <div class="titleRow">{{ t('apply.open_up.店铺联系人信息') }}</div>
        <template v-if="tenantInfo.settleType === 1">
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.所在地') }}</div>
            <div class="custom-table-value">
              {{ tenantInfo.settleLocation }}
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.详细地址') }}</div>
            <div class="custom-table-value">{{ tenantInfo.settleAddress }}</div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.联系人') }}</div>
            <div class="custom-table-value">{{ tenantInfo.settleContact }}</div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ t('apply.open_up.联系手机号') }}
            </div>
            <div class="custom-table-value">{{ tenantInfo.settlePhone }}</div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ t('apply.open_up.身份证正面') }}
            </div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleIdImage1"
                :previewSrcList="[tenantInfo.settleIdImage1]"
              />
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ t('apply.open_up.身份证反面') }}
            </div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleIdImage2"
                :previewSrcList="[tenantInfo.settleIdImage2]"
              />
            </div>
          </div>
        </template>
        <template v-if="tenantInfo.settleType === 2">
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.公司名称') }}</div>
            <div class="custom-table-value">
              {{ tenantInfo.settleCompanyName }}
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.所在地') }}</div>
            <div class="custom-table-value">
              {{ tenantInfo.settleLocation }}
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.详细地址') }}</div>
            <div class="custom-table-value">{{ tenantInfo.settleAddress }}</div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.联系人') }}</div>
            <div class="custom-table-value">{{ tenantInfo.settleContact }}</div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ t('apply.open_up.联系手机号') }}
            </div>
            <div class="custom-table-value">{{ tenantInfo.settlePhone }}</div>
          </div>
          <div class="titleRow">{{ t('apply.open_up.营业执照信息') }}</div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.营业执照') }}</div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleLicenseImage"
                :previewSrcList="[tenantInfo.settleLicenseImage]"
              />
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ t('apply.open_up.法人身份证正面') }}
            </div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleIdImage1"
                :previewSrcList="[tenantInfo.settleIdImage1]"
              />
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ t('apply.open_up.法人身份证反面') }}
            </div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleIdImage2"
                :previewSrcList="[tenantInfo.settleIdImage2]"
              />
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ t('apply.open_up.补充认证一') }}
            </div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleExtra1"
                :previewSrcList="[tenantInfo.settleExtra1]"
              />
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ t('apply.open_up.补充认证二') }}
            </div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleExtra2"
                :previewSrcList="[tenantInfo.settleExtra2]"
              />
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ t('apply.open_up.补充认证三') }}
            </div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleExtra3"
                :previewSrcList="[tenantInfo.settleExtra3]"
              />
            </div>
          </div>
        </template>

        <div class="titleRow">{{ t('apply.open_up.佣金比例及收款信息') }}</div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.佣金比例') }}</div>
          <div class="custom-table-value">
            {{ configData.commissionRate ?? "--" }}%
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.收款人姓名') }}</div>
          <div class="custom-table-value">
            {{ configData.accountBankAccountName ?? "--" }}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">
            {{ t('apply.open_up.收款账户号码') }}
          </div>
          <div class="custom-table-value">
            {{ configData.accountBankAccountNo ?? "--" }}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">
            {{ t('apply.open_up.收款银行名称') }}
          </div>
          <div class="custom-table-value">
            {{ configData.accountBankName ?? "--" }}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">
            {{ t('apply.open_up.收款银行地址') }}
          </div>
          <div class="custom-table-value">
            {{ configData.accountBankAddress ?? "--" }}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.SWIFT CODE') }}</div>
          <div class="custom-table-value">
            {{ configData.accountBankCode ?? "--" }}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">
            {{ $t("annualFee.缴纳年限") }}
          </div>
          <div class="custom-table-value flex">
            <span
              >{{ tenantInfo.ruleDuration ?? "--"
              }}{{ $t("apply.business_info.年") }}</span
            ><span class=""
              >{{ tenantInfo.ruleFee }}{{ $t("annualFee.元") }}</span
            >
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ t('apply.open_up.支付凭证') }}</div>
          <div class="custom-table-value">
            <el-image
              style="width: 100px; height: 100px"
              :src="tenantInfo.payImage"
              :previewSrcList="[tenantInfo.payImage]"
            />
          </div>
        </div>
      </div>
            <template v-if="tenantInfo.status == -1">
        <div class="flex_aic mb12 mt24">
          <div class="fs-14 font-500">
            {{ t("apply.open_up.审核失败原因") }}
          </div>
          <div class="color-999999 fs-12 ml12">
            {{
              tenantInfo.checkTime
                ? moment(tenantInfo.checkTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </div>
        </div>
        <div class="fs-14 mt12 mb12 color-ff2b4e">
          {{ tenantInfo["rejectReasonName" + locale] }}
        </div>
        <div class="reasonBox">
          {{ tenantInfo.rejectReason || "--" }}
        </div>
      </template>
      <div class="flex_jcc mt20" v-if="tenantInfo.status == -1">
        <el-button type="primary" size="large" @click="restConfirm">{{
          t("apply.open_up.重新填写")
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import moment from "moment";
import { useRouter } from "vue-router";
import { setAttrLangs, getLangs } from "@/i18n/tools";
import { formData } from "../data";

const { locale, t } = useI18n();
const tenantInfo = ref({});
const configData = ref({});
const router = useRouter()
// 经营类目

const getTenantInfo = async () => {
  const user = Storage.get("user", true);
  try {
    const res = await Api.tenantInfo(user.user.tenantId);
    tenantInfo.value = res.data || {};
    initFormData();
    if(tenantInfo.value.status === 2){
      autoLogin()
    }
  } catch (error) {
    console.log(error);
  }
};

const getPlatformConfig = () => {
  Api.platformConfig().then((res) => {
    if (res?.status == 200) {
      configData.value = res?.data || {};
    }
  });
};
const restConfirm = () => {
  console.log(formData.value);
  router.push("/apply/base_info");
};


const initFormData = () => {
  getLangs().forEach((el) => {
    formData.value["name" + el] = tenantInfo.value["name" + el];
  });
  const {
    settleLicenseImage,
    settleIdImage1,
    settleIdImage2,
    settleExtra1,
    settleExtra2,
    settleExtra3,
  } = tenantInfo.value;
  formData.value.ruleId = tenantInfo.value.ruleId;
  formData.value.payImage = [{ url: tenantInfo.value.payImage }];
  formData.value.skuClassifyIds = tenantInfo.value.skuClassifyIds;
  formData.value.settleType = tenantInfo.value.settleType;
  formData.value.settleCompanyName = tenantInfo.value.settleCompanyName;
  formData.value.settleLocation = tenantInfo.value.settleLocation;
  formData.value.settleAddress = tenantInfo.value.settleAddress;
  formData.value.settleContact = tenantInfo.value.settleContact;
  formData.value.settlePhone = tenantInfo.value.settlePhone;
  formData.value.settleLicenseImage = settleLicenseImage
    ? [{ url: settleLicenseImage }]
    : "";
  formData.value.settleIdImage1 = settleIdImage1
    ? [{ url: settleIdImage1 }]
    : "";
  formData.value.settleIdImage2 = settleIdImage2
    ? [{ url: settleIdImage2 }]
    : "";
  formData.value.settleExtra1 = settleExtra1 ? [{ url: settleExtra1 }] : "";
  formData.value.settleExtra2 = settleExtra2 ? [{ url: settleExtra2 }] : "";
  formData.value.settleExtra3 = settleExtra3 ? [{ url: settleExtra3 }] : "";

  console.log("formData.value", formData.value);
};

const autoLogin = ()=>{
  Api.authInfo({}).then(async (res)=>{
    if(res.status === 200){
      Storage.set("user", res?.data?.user, true);
      Storage.set("roles", res.data?.user?.roles || [], true);

      const menuRes = await Api.getBuildMenu();
      const menu = menuRes.data || [];
      sortMenu(menu);
      Storage.set("menus", menu, true);
      router.push(getFirstMenu(menuRes.data));
    }
  })
}

const sortMenu = (menu) => {
  menu.sort((a, b) => a.menuSort - b.menuSort);
  menu.forEach((item) => {
    if (item.children?.length) {
      sortMenu(item.children);
    }
  });
};

const getFirstMenu = (menu) => {
  const f = (arr) => {
    if (arr?.[0]?.path) return arr?.[0]?.path;
    if (arr?.[0]?.children?.length) {
      return f(arr?.[0]?.children);
    }
  };
  return f(menu) || "";
};

onMounted(() => {
  getTenantInfo();
  getPlatformConfig();
});
</script>

<style lang="scss" scoped>
.reasonBox {
  width: 650px;
  height: 100px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  color: #333;
}

.titleRow {
  height: 36px;
  line-height: 36px;
  background: rgba(255, 120, 45, 0.05);
  border-radius: 3px;
  padding-left: 10px;
  margin-top: 12px;
  font-weight: 500;
  color: #333;
}
</style>
